<template>
    <el-form-item :label="props.title">
        <div class="files-uploader-container">
            <div class="files-uploader-list">
                <ul>
                    <li v-for="file in fileList" :key="file.id">
                        <p class="tit" :class="getFileType(file.name)">{{file.name}}</p>
                        <div class="remove-btn" @click.stop="removeFile(file.id)">
                            <el-icon><Delete /></el-icon>
                        </div>
                    </li>
                </ul>
            </div>
            <el-button @click="showFilesUpload = true">上传附件</el-button>
        </div>
        <FilesUpload v-model:showDialog="showFilesUpload" :limit="props.limit" @getFileList="handleGetFiles"/>
    </el-form-item>
</template>
<script setup>
import {defineProps, ref, defineEmits, computed} from 'vue';
import { Delete } from '@element-plus/icons-vue'
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    value: {
        type: Array,
        default: null
    },
    limit: {
        type: Number,
        default: null
    },
})
const emits = defineEmits(['update:value'])

const showFilesUpload = ref(false)
const fileList = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value', val)
  }
})
const handleGetFiles = (files) => {
  fileList.value = fileList.value.concat(files)
}
//删除附件
const removeFile = (id) => {
  fileList.value = fileList.value.filter(item => item.id !== id)
}

const getFileType = (name) => {
    return name.substring(name.lastIndexOf('.') + 1)
}
</script>
<style lang="scss" scoped>
.files-uploader-container {
    width: 100%;
    .files-uploader-list {
        margin-bottom: 10px;
        ul {
            li {
                display: flex;
                align-items:center;
                margin-bottom: 10px;
                cursor: pointer;
                border-radius:4px;
                margin:0 -5px;
                padding: 0 5px;
                .tit {
                    flex: 1;
                    position: relative;
                    padding-left: 30px;
                    &:before{
                        position: absolute;
                        left: 0;
                        font-size: 22px;
                        line-height: 1;
                        content: "\e663";
                        display: block;
                        font-family: "iconfont";
                        top:50%;
                        transform:translateY(-50%)
                    }
                    &.doc:before, &.docx:before{
                        content:"\edd5";
                        color:#4568a0;
                    }
                    &.xls:before,&.xlsx:before{
                        content:"\e67a";
                        color:#378458;
                    }
                    &.pdf:before{
                        content:"\e602";
                        color:#e81f05;
                    }
                    &.zip:before{
                        content:"\e605";
                        color:#a372db;
                    }
                }
                .remove-btn {
                    color: $white;
                    cursor: pointer;
                    display: none;
                    height: 24px;
                    width: 24px;
                    background-color: #FF5240;
                    box-sizing: border-box;
                    border: 1px solid rgba(255,255,255,0.5);
                    align-items: center;
                    justify-content: center;
                    i{
                        font-size: 16px;
                    }
                }
                &:hover {
                    background-color: $focusContent;
                    .remove-btn {
                        display: flex;
                    }
                }
            }
        }
    }
    .files-uploader {
        cursor: pointer;
    }
}
</style>
